<template>
	<view class="u-padding-40 page">
		<Navbar title="找员工"></Navbar>
		<view class="u-font-32 u-font-w-6 u-margin-bottom-40">员工分类</view>
		<view :class="['type-data']" style="margin-bottom: 5%;">
			<view class="u-flex nannywork_box">
				<image src="/static/image/icon-work-nanny.png"></image>
				<text class="u-font-40 u-font-w-6 u-padding-left-38 u-padding-right-30">保姆类型</text>
			</view>
			<view class="nannywork_list">
				<view v-for="(item, index) in DictionaryList" :key="index" :class="['int', item.Code == id ? 'action' : '']" @click="DictionaryType(item)">{{ item.Name }}</view>
			</view>
		</view>
		<br />
		<br />
		<view :class="['type-data']" style="margin-bottom: 5%;">
			<view class="u-flex nannywork_box">
				<image src="/static/image/icon-work-cleaner.png"></image>
				<text class="u-font-40 u-font-w-6 u-padding-left-38 u-padding-right-30">保洁</text>
			</view>
			<view class="nannywork_list">
				<view class="int" v-for="(item, index) in ByCategoryList" :key="index" :class="['int', item.Id == id ? 'action' : '']" @click="ByCategoryType(item)">
					{{ item.Name }}
				</view>
			</view>
		</view>
		<view><u-button type="primary" shape="circle" @click="link_to('pages/nanny/index?type=' + type + '&id=' + id)">确认选择</u-button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 1,
			id: undefined,
			DictionaryList: [],
			ByCategoryList: []
		};
	},
	onLoad(e) {
		this.getMenu();
	},
	methods: {
		getMenu() {
			const _this = this;
			//保姆筛选条件
			this.$u.api
				.GetDictionary({
					type: '岗位类型'
				})
				.then(res => {
					_this.DictionaryList = res.data || [];
				});
			//保洁服务筛选条件
			this.$u.api
				.GetByCategory({
					categoryNo: 100002
				})
				.then(res => {
					_this.ByCategoryList = res.data || [];
				});
		},
		//保姆
		DictionaryType(e) {
			console.log(e)
			this.type = 0;
			this.id = e.Code;
		},
		//保洁
		ByCategoryType(e) {
			console.log(e)
			this.type = 1;
			this.id = e.Id;
		},
		link_to() {
			if (!this.id) {
				uni.showToast({
					title: '请选择类型！',
					icon: 'none'
				});
				return;
			}
			this.link_to_page('/pages/nanny/index?type=' + this.type + '&id=' + this.id, 'reLaunch');
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	background-color: #f4f5f7;
}

.type-data {
	width: 670rpx;
	min-height: 260rpx;
	padding: 0 54rpx;
	background: #ffffff;
	border-radius: 16rpx;
	border: 1px solid #fff;

	image {
		width: 94rpx;
		height: 94rpx;
	}
}

.choose {
	border: 1px solid #dd1a00;
}

.nannywork_box {
	padding-top: 3%;
}

.nannywork_list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
    justify-content: space-between;
	padding-top: 5%;

	.int {
		width: 48%;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 23rpx;
		text-align: center;
		border-radius: 10rpx;
		border: 1rpx solid #333333;
		font-size: 36rpx;
		margin-bottom: 22rpx;
	}

	.action {
		width: 48%;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 33rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #dd1a00;
		border: 1rpx solid #dd1a00;
		color: #fff;
		font-size: 36rpx;
		margin-bottom: 22rpx;
	}
}
</style>
